<template>
  <div class="theLogin">
    <div class="theLoginBox relative scrollBar">
      <div class="headerTopMain theRegisterMain">
        <div class="theLoginImg">
          <img :src="theRegisterImg" alt="">
        </div>
        <div class="theLoginInfo ">
          <div class="theLoginPadding">
            <div class="theLoginPng">
              <p>
                <router-link :to="{name:'login',query:{stateId:1}}" class="login"
                             :class="{on:$route.query.stateId=='1'}" tag="span">登录
                </router-link>
                <b>|</b>
                <router-link :to="{name:'register',query:{stateId:2}}" class="register"
                             :class="{on:$route.query.stateId=='2'}" tag="span">注册
                </router-link>
              </p>
            </div>
            <div class="theLoginFill">
              <p>
                <input type="text" v-model="submitData.username" placeholder="请输入用户名" maxlength="20">
              </p>
              <p>
                <input type="password" v-model="submitData.password" placeholder="请输入6-12位包含数字、字母的密码" maxlength="12">
              </p>
              <p>
                <input type="password" v-model="submitData.confirmPassword" placeholder="请再次输入密码" maxlength="12">
              </p>
            </div>
            <div class="theLoginChecked">
              <div class="theCheckLeft theCheckRegisterLeft">
                <div class="registerCheck" v-if="isChecked" @click="checkEvent">
                  <Icon type="android-checkbox"></Icon>
                </div>
                <div class="registerCheck" v-if="!isChecked" @click="checkEvent">
                  <Icon type="android-checkbox-outline-blank"></Icon>
                </div>
                <!--<Icon type="android-checkbox-outline-blank"></Icon>-->我已同意<a href="javascript:void(0)"
                                                                                 class="theCheckRA"
                                                                                 @click="agreementText">《黑桃A彩票服务协议》</a>
              </div>
            </div>
            <div class="theLoginBtn">
              <a href="javascript:void(0)" @click="determinant">注册</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <theAgreement v-if="agreementTrue"></theAgreement>
  </div>
</template>

<script>
  import '../login/login.scss';
  import theAgreement from './agreement';
  
  export default {
    data() {
      return {
        theRegisterImg: require('../../../assets/images/theUser/register/redPacket.png'),
        submitData: {
          username: '',
          password: '',
          confirmPassword: '',
          enterPassword: ''
        },
        shackles: false,
        agreementTrue: false,
        isChecked: true
      }
    },
    components: {
      theAgreement
    },
    mounted() {
      this.compHeight();
      let that = this;
      let aId = '';
      aId = this.$route.query.agentId || '';
      this._Util.setItem('aId', aId);
      $(window).resize(function () {
        that.compHeight();
      });
    },
    activated() {
      this.compHeight();
    },
    deactivated() {
      this.init();
    },
    methods: {
      init() {
        let that = this;
        that.submitData.username = '';
        that.submitData.password = '';
        that.submitData.confirmPassword = '';
      },
      checkEvent(index) {
        this.isChecked = !this.isChecked;
      },
      compHeight() {
        let height = $(window).height();
        $('.theLogin').innerHeight(height);
      },
      determinant() {
        let that = this;
        if (that.submitData.username === '' || that.submitData.username.length < 6 || that.submitData.username.length > 10) {
          that._Util.showAlert('请输入6-10位用户名');
          return;
        }
        if (that.submitData.password === '' || that.submitData.password.length < 6 || that.submitData.password.length > 12) {
          that._Util.showAlert('请输入6-12位密码');
          return;
        }
        if (that.submitData.password != that.submitData.confirmPassword) {
          that._Util.showAlert('两次密码输入不一致');
          return;
        }
        if (!that.isChecked) {
          that._Util.showAlert('请阅读并同意协议');
          return;
        }
        let submitDataPaws = that.submitData.password;
        that.initData(submitDataPaws);
      },
      initData(paw) {
        let that = this;
        let submitDataNews;
        if (that.$route.query.agentId) {
          submitDataNews = {
            username: that.submitData.username || '',
            password: that._Util.hexMd5(paw),
            agentId: that._Util.getItem('aId') || '',
          };
        } else {
          submitDataNews = {
            username: that.submitData.username || '',
            password: that._Util.hexMd5(paw),
          };
        }
        if (that.shackles) return;
        that.shackles = true;
        that._Util.post(that, that._Api.POST_REGISTER, submitDataNews, (data, oldData) => {
          if (oldData.code === -1) {
            that.shackles = false;
            return;
          }
          that._Util.showAlert('注册成功!');
          that.shackles = false;
          that._Util.setItem('loginStatus', true);
          that.$store.state.mutations.loginStatus = true;
          setTimeout(function () {
            that.$router.replace({name: 'index'});
          }, 1500);
        }, (data) => {
          that.shackles = false;
        }, 'post');
      },
      agreementText() {
        this.agreementTrue = true;
        $('body,html').css({
          "height": "100%",
          "overflow-y": 'hidden'
        })
      }
    },
    watch: {
      'submitData.username'() {
        this.submitData.username = this.submitData.username.replace(/[\W]/g, '');
      },
      'submitData.password'() {
        this.submitData.password = this.submitData.password.replace(/[\W]/g, '');
      },
      'submitData.confirmPassword'() {
        this.submitData.confirmPassword = this.submitData.confirmPassword.replace(/[\W]/g, '');
      }
    }
  }
</script>
